<template>
  <div id="continue" @click="listenClick($event)">
    <div class="chat-wrapper">
      <div class="sidebar-panel">
        <div class="avatar">
          <img src="@/assets/images/avatar.jpg" alt="">
        </div>
        <div class="menu-list">
          <template v-for="(item,key) in menus">
            <i :title="item.title" class="iconfont" :class="[item.icon,key===activeMenu?'active':'']"
               @click="switchMenu(key)"></i>
          </template>
        </div>
      </div>
      <div class="content-panel">
        <Message v-if="activeMenu === 'message'"/>
        <Friends v-else-if="activeMenu === 'friends'"/>
        <Collect v-else-if="activeMenu === 'collect'"/>
        <Files v-else-if="activeMenu === 'files'"/>
      </div>
    </div>
  </div>

</template>


<script setup lang="ts">
//发送消息组件
import Message from "@/components/message/message.vue";
//联系人组件
import Friends from '@/components/friends/frineds.vue';
//收藏组件
import Collect from '@/components/collect/collect.vue';
//文件组件
import Files from '@/components/files/files.vue';

//引入菜单控制逻辑
import {Menu} from '@/hooks/indexHooks/menu.ts';
//引入聊天组件
import {useChat} from '@/hooks/indexHooks/chat.ts';

let {activeMenu, menus, switchMenu} = Menu();

let {listenClick} = useChat();

</script>

<style scoped lang="scss">
@use "@/pages/index/index.scss";
</style>